<!DOCTYPE html>
<html>
<head>
<title>ProcessingJS.org :: Manual Test for Issue #99</title>

<script src="../../processing.min.js"></script>
</head>
<body>

<h1>Manual Test for Issue #99</h1>
<p>Manual test verify the fix for 
<a href="https://github.com/processing-js/processing-js/issues/99">Issue #99 : touch events not working after v1.4.1</a>.</p>

<div>
<canvas id="canvas-issue-99"  data-processing-sources="test-issue-99.pde"></canvas>
<label for="canvas-issue-99">Use this canvas to test the actions below.</label>
</div>

<div>
<ol>
<li>
    <img id="test-image-1"
    src=""
    alt="1. initial drawing: grey square centred on black background" /> 
    <label for="test-image-1">initial drawing, no interaction</label>
</li>
<li> 
    <img id="test-image-2"
    src=""
    alt="2. on hover: grey square with white outline centred on black background" />
    <label for="test-image-2">on (mouse) hover, center square gets a white outline.</label>
</li>
<li>
    <img id="test-image-3"
    src=""
    alt="3. on mousedown : white square centred on black background" />
    <label for="test-image-3">on mousedown/touchstart, center square turns white</label>
</li>
<li>
    <img id="test-image-4"
    src=""
    alt="4. on mouse move: white square moved to bottom corner of black background" /> 
    <label for="test-image-4">on mousemove/touchmove, white square moves</label>
</li>
</ol>
</div>

</body>
</html>

